<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        #box{
        width: 300px;
        height: 400px;
        border: 1px solid #ccc;
    }
    
    </style>
</head>

<body>
    <input type="button" value="创建列表" id="btn">
    <div id="box"></div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
        // $('#btn').click(function () {
        //     var str = "<p>我是p元素</p>"
        //     if (this.value == '创建列表') {
        //         this.value = "删除列表"
        //         for (var i = 0; i < 5; i++) {
        //             $('#box').append(str)
        //         }
        //         $('#box').empty()
        //     } else {
        //         this.value = "创建列表"
        //         for (var i = 0; i < 5; i++) {
        //             $('#box').append(str)
        //         }
        //     }
        // })

        //动态创建列表
        var arrObj = ['吃饭', '睡觉', '喝水', '游泳', '踢足球']

        $('#btn').click(function () {
            $("#box").append('<ul></ul>')
            for (var i = 0; i < arrObj.length; i++) {
                $('#box ul').append('<li>' + arrObj[i] + '<li>')
                $('#box ul li').mouseenter(mouseenterTap)
                $('#box ul li').mouseleave(mouseleaveTap)
            }
        })

        //简单的封装
        function mouseenterTap() {
            $(this).css('background-color', 'red')
        }

        function mouseleaveTap() {
            $(this).css('background-color', '')
        }
    </script>
</body>

</html>